<%--
  Created by IntelliJ IDEA.
  User: kangx
  Date: 2020/8/15
  Time: 14:34
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html class="x-admin-sm">
<head>
    <meta charset="UTF-8">
    <title>会员列表</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
    <link rel="stylesheet" href="${AppPath}/css/font.css">
    <link rel="stylesheet" href="${AppPath}/css/index.css">
    <script src="${AppPath}/lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="${AppPath}/js/index.js"></script>
</head>
<body>
<div class="x-nav">
          <span class="layui-breadcrumb">
            <a href="">首页</a>
            <a href="">演示</a>
            <a>
              <cite>导航元素</cite></a>
          </span>
    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" onclick="location.reload()" title="刷新">
        <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i></a>
</div>
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <br/>
                <%--                搜索框--%>
                <div class="demoTable layui-form">
                    &nbsp; &nbsp; &nbsp;
                    <div class="layui-inline">
                        <input class="layui-input" name="userName" id="userName" autocomplete="off" placeholder="请输入用户名">
                    </div>
                    <div class="layui-inline">
                        <select class="layui-input"  name="userStatus" id="userStatus" autocomplete="off">
                            <option value="">请选择用户类型</option>
                            <option value="1">员工</option>
                            <option value="2">学生</option>
                            <option value="3">公司</option>
                        </select>
                    </div>
                    <button class="layui-btn" data-type="reload">搜索</button>
                </div>
                <%--        定义一个表格--%>
                <div class="layui-card-body layui-table-body layui-table-main">
                    <table class="layui-table layui-form" id="table_id" lay-filter="dataTable"></table>
                </div>
            </div>
        </div>
    </div>
</div>
</body>


<%--行工具条--%>
<script type="text/html" id="barDemo">
    <a title="重置密码" lay-event="resetPwd" style="cursor:pointer">
        <i class="layui-icon">&#xe620;</i>
    </a>

</script>

<script>
    layui.use(['laydate','form','table'], function(){
        var  form = layui.form;
        var table = layui.table;


        //查询
        var $ = layui.$,
            active = {
                reload: function(){
                    //执行重载
                    table.reload('dataTable', {
                        page: {
                            curr: 1 //重新从第 1 页开始
                        }
                        ,where: {
                            userName: $("#userName").val(),
                            userStatus:$("#userStatus").val()
                        }
                    }, 'data');
                }
            };
        //查询按钮添加单机事件
        $('.demoTable .layui-btn').on('click', function(){
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });

        // 生成表格
        table.render({
            id:"dataTable",//
            elem: '#table_id',//指定表格元素
            url: '${AppPath}/user/findAll',  //请求路径
            cellMinWidth: 10//全局定义常规单元格的最小宽度，layui 2.2.1 新增
            ,skin: 'line ' //表格风格 line （行边框风格）row （列边框风格）nob （无边框风格）
            ,even: true    //隔行换色
            ,page: true  //开启分页
            ,limits: [10,20,50]  //每页条数的选择项，默认：[10,20,30,40,50,60,70,80,90]。
            ,limit: 10 //每页默认显示的数量
            ,method:'post'  //提交方式
            ,toolbar: '#all_btn'
            ,cols: [
                [
                    {
                        title :'用户列表',
                        align:'center',
                        colspan:'4',
                        rowspan:'1'
                    },
                ],
                [
                    {type:'checkbox'}, //开启多选框
                    {
                        title: '序号',
                        type: 'numbers'
                    },
                    {
                        field: 'userName', //json对应的key
                        title: '用户名',   //列名
                        sort: false   // 默认为 false,true为开启排序
                    },
                    {
                        // field: 'userStatus', //json对应的key
                        title: '用户类型',   //列名
                        sort: false,   // 默认为 false,true为开启排序
                        templet:function (d) {
                            var str='';
                            if (d.userStatus=='1'){
                                str="员工"
                            }else if (d.userStatus=='2'){
                                str="学生"
                            }else{
                                str="公司"
                            }
                            return str;
                        }
                    },
                    {
                    fixed: 'right',
                    title: '操作',
                    align:'center',
                    toolbar: '#barDemo', //绑定按钮组
                    },
                ]]

        })



        //监听行工具条
        table.on('tool(dataTable)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）

            if(layEvent === 'resetPwd'){ //删除
                    //向服务端发送重置密码指令
                    $.ajax({
                        url:'${AppPath}/user/resetPwd',
                        data:{'empId':data.userId},
                        type:'post',
                        success:function (resp) {
                            if (resp=='ok') {
                                obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                                layer.msg('重置成功', {icon: 1,time:1500});
                                layer.close(index);
                            }
                        }
                    })
            }
        });

    });




</script>
</html>